<template>
  <div class="monthReportManage-container page-common-layout">
    <div class="report-body-container">
      <!-- <div class="operate">
        <a-button
          @click="handleAdd()"
          class="cu-btn-primary margin-bottom-xs"
          icon="plus"
        >
          新增
        </a-button>
      </div> -->
      <div class="main">
        <vxe-table
          ref="xTable"
          height="99%"
          align="center"
          show-overflow
          show-header-overflow
          border="inner"
          :data="tableData"
          :column-config="{ resizable: true }"
          size="small"
          :loading="loading"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="name" title="名称"> </vxe-column>
          <vxe-column field="remark" title="简介"> </vxe-column>
          <vxe-column
            field="operate"
            width="100"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-tooltip v-action:gqgl_edit>
                  <template slot="title">
                    编辑
                  </template>
                  <a-icon type="edit" @click="editor(row)" />
                </a-tooltip>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>

    <!-- 编辑弹窗-->
    <edit-form
      ref="createModal"
      :visible="visible"
      :loading="confirmLoading"
      :url="url"
      requestMethod="post"
      :tableDataType="tableDataType"
      @cancel="handleCancel()"
      @ok="handleOk()"
    />
  </div>
</template>

<script>
import editForm from "@/pages/form/formPreview/edit.vue";
import { pagePortArea } from "@/api/progressManage";
export default {
  components: {
    editForm,
  },
  data() {
    return {
      //列表
      loading: false,
      tableData: [],
      visible: false,
      confirmLoading: false,
      url: {
        save: "/form/formDatabase/formSave",
        update: "/form/formDatabase/formUpdate",
      },
      tableDataType: "",
      tableUuid: "DE6437EFD4C942A09B6A29EC3B49FE97",
    };
  },

  mounted() {
    this.getTableData();
  },
  methods: {
    //关闭弹窗
    handleCancel() {
      this.visible = false;
    },

    handleOk() {
      this.visible = false;
      this.getTableData();
    },

    // 新增
    async handleAdd() {
      this.visible = true;
      this.$refs.createModal.title = "新增";
      let formJsonData = await this.loadDataJson(this.tableUuid);
      let { addApiUrl } = JSON.parse(formJsonData)?.config ?? {};
      this.url.save = addApiUrl ?? "/form/formDatabase/formSave";
      this.$refs.createModal.loadData(this.tableUuid, "add", formJsonData);
    },

    //编辑
    async editor(record = {}) {
      let { uuid } = record;
      this.visible = true;
      let formJsonData = await this.loadDataJson(this.tableUuid);
      let { editApiUrl } = JSON.parse(formJsonData)?.config ?? {};
      this.url.update = editApiUrl ?? "/form/formDatabase/formUpdate";
      this.$refs.createModal.title = "编辑";
      this.$refs.createModal.loading = true;
      this.$post("/form/formDatabase/formGetDetail", {
        uuid: uuid,
        formUuid: this.tableUuid,
      }).then((res) => {
        this.$refs.createModal.loadData(
          this.tableUuid,
          "edit",
          formJsonData,
          res
        );
      });
    },

    loadDataJson(tableUuid = "") {
      return new Promise((reslove) => {
        this.$post("/form/formBasicConfigure/getDetailByUuid", {
          uuid: tableUuid,
        })
          .then((res) => {
            this.tableDataType = res.formDatabase?.type || "";
            reslove(res.formDesign.designJson);
          })
          .catch((_) => {
            reslove({});
          });
      });
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      pagePortArea()
        .then((res) => {
          this.tableData = res?.data ?? [];
        })
        .catch((_) => {
          this.tableData = [];
        })
        .finally((_) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="less" scoped>
.monthReportManage-container {
  display: flex;
  flex-direction: column;
  .report-body-container {
    flex: 1;
    background-color: @base-bg-color;
    flex-shrink: 0;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .operate {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .main {
      flex: 1;
      .operate-icon {
        .anticon {
          cursor: pointer;
          font-size: 18px;
          color: #1677ff;
        }
        .anticon-eye {
          margin-right: 20px;
        }
        .anticon-download {
          color: #239b53;
        }
      }
      .text-button-group {
        .month-icon {
          color: #00c1b6;
        }
        .submit-icon {
          color: #6e6bf2;
        }
        .record-icon {
          color: #c652f0;
        }
        .flow-icon {
          color: #f07f17;
        }
        .summary-icon {
          color: #1ba6f3;
        }
      }
      .status {
        position: relative;
        &::before {
          content: "";
          width: 8px;
          height: 8px;
          border-radius: 50%;
          display: inline-block;
          margin-right: 4px;
        }
        &.default {
          &::before {
            background: #8c8c8c;
          }
        }
        &.warning {
          &::before {
            background: #1677ff;
          }
        }
        &.success {
          &::before {
            background: #4bc964;
          }
        }
        &.progress {
          &::before {
            background: #c652f0;
          }
        }
        &.error {
          &::before {
            background: #e43d3d;
          }
        }
      }
    }
    .pager-container {
      flex-shrink: 0;
      box-sizing: border-box;
    }
  }
}
</style>
